<template>
    <view class="box">
        <view class="flex">
            <img class="w-calc-50" src="@/static/images/region1.png" @click="go(1)">
            <view class="flex" style="flex-direction: column; justify-content: space-between;flex: 1;">
                <img class="img flex-1 w-100" src="@/static/images/region2.png" @click="go(2)">
                <img class="img flex-1 w-100" src="@/static/images/region3.png" @click="go(3)">
            </view>
        </view>
        <view style="margin-top: 30rpx;justify-content: space-between;" class="flex last">
            <img class="w-calc-50" src="@/static/images/region4.png" @click="go(4)">
            <img class="w-calc-50" src="@/static/images/region5.png" @click="go(5)">
        </view>
    </view>
</template>

<script>
export default {
    methods: {
        go(type) {
            let url = ''
            switch (type) {
                case 1:
                    url = '/'
                    break;
                case 2:
                    url = '/'
                    break;
                case 3:
                    url = '/'
                    break;
                case 4:
                    url = '/'
                    break;
                case 5:
                    url = '/'
                    break;
            }
            uni.navigateTo({ url })
        }
    }
}
</script>

<style lang="scss" scoped>
*{
    box-sizing: border-box;
}
.box {
    padding: 10px;
}

.w-100{
    width: 100%;
}

.flex-1{
    flex: 1;
}

.w-calc-50{
    width: calc(50% - 7rpx);
}

.flex {
    gap: 15rpx;
}
</style>